<script setup lang='ts'>
  import { reactive } from 'vue';
  import xmdialog from '@/components/xmdialog.vue';
  const $emit = defineEmits(['openShop'])
  const action = reactive({
    show:false,
    submitSet:true,
    showtype:1, // 1二次确认 2金豆额度不足 3钻石额度不足
  })
  const voteForm = reactive({
    type:0, // 奖池type
    integralType:0, // 押注type
  })
  const handleClose = ()=>{
    action.show = false
  }
  const handleSubmit = ()=>{
    action.show = false
    if(action.showtype == 2) {
      $emit('openShop')
      return
    }
    if(action.showtype == 3) {
      ( kk as any).pay()
      return
    }
  }
  interface formQuery {
    type:number,
    integralType:number,
    showtype:number
  }
  const openDialog = (query = {} as formQuery)=>{
    const {
      type=0, // 奖池type
      integralType=0, // 押注type
      showtype=1, // 1二次确认 2弹窗金豆不足 3弹窗钻石不足
    } = query
    Object.assign(voteForm,{
      type,
      integralType
    })
    action.showtype = showtype
    action.show = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div class="confirmDialog">
    <xmdialog :closeShow="false" v-model:dialogshow="action.show">
      <div v-if="action.showtype > 1" class="tips">
        {{ action.showtype == 2?'金豆余额不足，请先兑换呦～':'' }}
        {{ action.showtype == 3?'钻石余额不足，请先充值呦～':'' }}
      </div>
      <div class="flex-align-center">
        <div @click="handleClose" class="but close">取消</div>
        <div @click="handleSubmit" class="but submit">
          {{action.showtype==2?'兑换':''}}
          {{action.showtype==3?'充值':''}}
        </div>
      </div>
    </xmdialog>
  </div>
</template>

<style lang='scss' scoped>
  :deep(.Functionality) {
    width: 270px;
    padding: 28px 14px 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--shopConfirmBackColor);
    border: var(--shopConfirmBorder);
    .tips {
      color: var(--shopConfirmTipsFontColor);
      font-size: 14px;
      font-weight: 400;
      text-align: center;
    }
    .but {
      width: 116px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      border-radius: 4px;
      margin-top: 20px;
    }
    .close {
      color: var(--shopConfirmcloseFontColor);
      margin-right: 10px;
      background: var(--shopConfirmcloseBack);
    }
    .submit {
      color: var(--shopConfirmSubmitFontColor);
      background: var(--shopConfirmSubmitBack);
    }
  }
</style>